<!--
 * @Description: 一卡通管理页面
 * @Author: fujingyao
 * @Date: 2021/11/10
-->
<template>
    <div class="container user-vip-manager">
        <div class="container-wrap">
            <!-- header -->
            <div
                class="header"
                ref="header"
            >
                <p class="header-title" >
                    <span >一卡通管理</span>
                    <span
                        class="return"
                        @click="$router.go(-1);">返回</span>
                </p>
            </div>

            <!-- content -->
            <div class="main">
                <main>
                    <div>
                        <span>用户昵称:</span>
                        <span>{{ user.true_name || '-' }}</span>
                    </div>
                    <div>
                        <span>用户ID:</span>
                        <span>{{ user.student_no || '-' }}</span>
                    </div>
                    <div>
                        <span>一卡通会员状态:</span>
                        <template v-if="user.status === 1">
                            <span style="color: #2FBDB3;">已开通</span>
                        </template>
                        <template v-else-if="user.status === 0">
                            <span style="color: #F95B56;">未开通</span>
                        </template>
                        <template v-else>
                            <span style="color: #F95B56;">未获取</span>
                        </template>
                    </div>
                    <div>
                        <span>当前连续开通时长:</span>
                        <span>{{ user.vip_start_time | dateFormatter('yyyy/MM/dd HH:mm:ss') }} - {{ user.vip_end_time | dateFormatter('yyyy/MM/dd HH:mm:ss') }} ({{ getSeriesTime || 0 }}个月)</span>
                    </div>
                    <div>
                        <span>预计过期时间:</span>
                        <span>{{ user.vip_end_time | dateFormatter('yyyy/MM/dd HH:mm:ss') }} ({{ isExpire() ? '未过期' : '已过期' }})</span>
                    </div>
                    <div>
                        <span>用户累计开通时常:</span>
                        <span>{{ user.vip_total_days || '-' }}天</span>
                    </div>
                    <div>
                        <span>累计金额:</span>
                        <span>￥{{ user.vip_total_buy_money }}</span>
                    </div>
                    <div style="display: flex;">
                        <span>一卡通记录:</span>
                        <span>
                            <el-table
                                :data="user.log_list"
                                :header-cell-style="headerCellStyle"
                                :cell-style="cellStyle"
                                border
                                style="width: 100%;">
                                <el-table-column
                                    prop="create_time"
                                    label="操作时间"
                                    width="188">
                                    <template slot-scope="scope">
                                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="type"
                                    label="摘要"
                                    width="140">
                                    <template slot-scope="scope">
                                        {{ calc(scope.row.type) }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="pay_money"
                                    label="金额"
                                    width="108"
                                    row-style>
                                    <template slot-scope="scope">
                                        {{ "¥"+scope.row.pay_money }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="operate_user_name"
                                    label="操作人"
                                    width="148"/>
                                <el-table-column
                                    prop="vip_last_days"
                                    label="会员剩余时长(天)"
                                    width="160"/>
                                <el-table-column
                                    prop="remark"
                                    label="备注"/>
                            </el-table>
                        </span>
                    </div>
                </main>

                <div class="btn-group">
                    <el-button
                        class="btn default-btn"
                        size="medium"
                        @click="unGiveBoxVisible = true"
                    >取消赠送</el-button>
                    <el-button
                        class="btn"
                        size="medium"
                        type="primary"
                        @click="giveBoxVisible = true"
                    >赠送一卡通</el-button>
                </div>
            </div>
        </div>

        <!-- 赠送一卡通会员弹框 -->
        <el-dialog
            custom-class="user-vip-manager-dialog"
            title="赠送一卡通会员"
            :visible.sync="giveBoxVisible"
            width="480px"
            @close="handleClickDialogBox(false,true)">
            <div>
                <div class="dialog-main">
                    <div>
                        <div
                            class="label"
                            style="width:106px;">
                            <span
                                class="right"
                                style="color: #fa7671;">*</span>赠送时长
                        </div>
                        <el-input
                            class="dialog-box give-month-box"
                            maxlength="6"
                            v-model="giveMonth"
                            placeholder="请输入"/>
                    </div>
                    <div>
                        <div style="width:84px;" />
                        <div
                            class="tips m-t-12"
                            :style="{color:tipColor}">请填写大于等于1的整数</div>
                    </div>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    class="w-100"
                    @click="handleClickDialogBox(false,true)"
                >取 消</el-button>
                <el-button
                    class="w-100"
                    type="primary"
                    :disabled="isGiveDisabled"
                    @click="handleClickDialogBox(true,true)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 赠送一卡通会员弹框 -->
        <!-- 取消赠送一卡通会员弹框 -->
        <el-dialog
            custom-class="user-vip-manager-dialog"
            title="取消赠送一卡通会员"
            :visible.sync="unGiveBoxVisible"
            width="480px"
            @close="handleClickDialogBox(false,false)">
            <div>
                <div class="dialog-main">
                    <div class="off-give-label">
                        <div style="">总开通会员时常</div>
                        <div class="days">
                            <span>{{ user.vip_total_days_by_admin || '-' }}</span>天
                        </div>
                    </div>
                    <div class="off-give-label">
                        <div>可取消天数</div>
                        <div class="days">
                            <span>{{ user.vip_valid_days_by_admin || '-' }}</span>天（1月=31天）
                        </div>
                    </div>
                    <div>
                        <div class="label w-120">
                            <span style="color: #fa7671;">*</span>取消赠送时长
                        </div>
                        <el-input
                            class="dialog-box un-give-day-box"
                            maxlength="8"
                            style="width:calc(100% - 120px)"
                            v-model="unGiveDay"
                            placeholder="请输入"/>
                    </div>
                    <div>
                        <div class="w-120" />
                        <div
                            class="tips m-t-12"
                            :style="{color:tipColor}">取消赠送时长可按天取消，不可超过已赠送天数</div>
                    </div>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    class="w-100"
                    @click="handleClickDialogBox(false,false)">取 消</el-button>
                <el-button
                    class="w-100"
                    type="primary"
                    :disabled="isNotGiveDisabled"
                    @click="handleClickDialogBox(true,false)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 取消赠送一卡通会员弹框 -->
    </div>
</template>

<script>
import {dateFormatter} from '@/assets/js/filters';

export default {
    data () {
        return {
            user:{
                // 用户昵称
                true_name:'',
                // 用户id
                student_no:'',
                // 一卡通会员状态
                status:-1,
                // 会员开始时间
                vip_start_time:0,
                // 会员结束时间
                vip_end_time:0,
                // 累计金额
                vip_total_buy_money:0,
                // 用户累计开通时常
                vip_total_days:0,
                // 一卡通记录
                log_list: [{
                    create_time: '',
                    type: -1,
                    pay_money: 0,
                    operate_user_name: '',
                    vip_last_days: 0,
                    remark: ''
                }],
                // 用户可取消天数
                vip_valid_days_by_admin:0,
                // 后台总开通会员数
                vip_total_days_by_admin:0
            },
            // 是否显示赠送框
            giveBoxVisible: false,
            // 赠送月份
            giveMonth:'',
            // 是否显示取消赠送框
            unGiveBoxVisible: false,
            // 取消赠送天数
            unGiveDay:'',
            // 提示文字颜色
            tipColor:'#999999',
            // 赠送按钮是否禁用
            isGiveDisabled:true,
            // 取消赠送按钮是否禁用
            isNotGiveDisabled:true
        };
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '用户管理'},{title: '一卡通管理'}]);

        // 获取数据更新页面
        this.updatePage();

    },
    methods: {
        // 表头样式设置
        headerCellStyle ({row, column, rowIndex, columnIndex}){
            let style = {
                'padding': '9px 14px !important',
            };

            if(columnIndex === 2 || columnIndex === 4){
                style['text-align'] = 'right';
            }else if(columnIndex === 1 ){
                style['text-align'] = 'center';
            }

            return style;
        },
        // 表格body样式设置
        cellStyle ({row, column, rowIndex, columnIndex}) {
            let style = {
                'padding':'14px 14px !important'
            };

            if(columnIndex === 1 || columnIndex === 4){
                style['text-align'] = 'center';
            }else if(columnIndex === 2){
                style['text-align'] ='right';
            }

            return style;
        },
        /**
         * @description 确认/关闭 弹出框
         * @param flag 确认按钮 true/关闭 按钮 false
         * @param isGive 赠送框 true/取消赠送 false
         */
        handleClickDialogBox (flag, isGive) {
            if(flag){
                // 确认按钮触发
                if(isGive){
                    // 赠送月份确认
                    if(isNaN(this.giveMonth) || !this.giveMonth){
                        return false;
                    }

                    if(this.giveMonth < 1){
                        this.$message.error('请输入正数');
                        return false;
                    }

                    let month = this.giveMonth / 1;

                    this.$post('/student/student_vip%5Cset_student_vip',{
                        student_no: this.user.student_no,
                        append_vip_days: month * 31
                    },res => {
                        if(res.code === 0){
                            this.$message.error(res.msg);
                        }else{
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.tipColor = '#999999';
                        }

                        // 更新
                        this.updatePage();
                    });

                }else{
                    // 取消赠送确认
                    if(isNaN(this.unGiveDay) || !this.unGiveDay){
                        return false;
                    }

                    if(this.unGiveDay < 1){
                        this.$message.error('请输入正数');
                        return false;
                    }
                    // 天数不能大于可取消天数
                    if(this.unGiveDay > this.user.vip_valid_days_by_admin){
                        this.$message.error('取消赠送天数不得大于可取消天数');
                        return false ;
                    }

                    let day = this.unGiveDay / 1;

                    this.$post('/student/student_vip%5Cset_student_vip',{
                        student_no: this.user.student_no,
                        append_vip_days: day * -1
                    },res => {
                        if(res.code === 0){
                            this.$message.error(res.msg);
                        }else{
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.tipColor = '#999999';
                        }

                        // 更新
                        this.updatePage();
                    });
                }
            }

            // 用户点击取消
            this.giveBoxVisible = false;
            this.unGiveBoxVisible = false;
            setTimeout(()=>{
                this.unGiveDay = '';
                this.giveMonth = '';
            },500);
        },

        // 获取间隔月份
        getMonth(endTime, startTime){

            let sTime = dateFormatter(startTime,'yyyy/MM').split('/');
            let eTime = dateFormatter(endTime,'yyyy/MM').split('/');

            return ((eTime[0] / 1) - (sTime[0] / 1)) * 12 + (eTime[1] / 1) - (sTime[1] / 1);
        },
        // 是否过期
        isExpire(){
            return (Date.parse(new Date()) < this.user.vip_end_time) ;
        },
        // 计算表格中的会员类型
        calc (num) {
            return [
                '首次开通会员',
                '开通会员',
                '会员续费',
                '会员过期',
                '会员取消'
            ][num];
        },
        updatePage(){
            this.$post('/student/student_vip%5Cget_student_vip_info',{ student_no:this.$route.query.student_no },resp => {
                let {data} = resp;

                if(resp.code === 0){
                    this.$message.error(resp.msg);
                    return false;
                }

                this.user = data;
                this.user.true_name = this.$route.query.true_name || '';
                this.user.student_no = this.$route.query.student_no || '';
                this.user.vip_start_time = this.user.vip_start_time * 1000;
                this.user.vip_end_time = this.user.vip_end_time * 1000;
            });
        }

    },
    computed: {
        getSeriesTime() {
            return this.getMonth(this.user.vip_end_time,this.user.vip_start_time);
        },
    },
    watch: {
        // 判断提示样式
        giveMonth(newValue) {
            this.tipColor = isNaN(this.giveMonth) || this.giveMonth < 0 ? '#fa7671': '#999999';
            this.isGiveDisabled = newValue === '' ? true : false ;
        },
        // 判断提示样式
        unGiveDay(newValue) {
            this.tipColor = isNaN(this.unGiveDay) || this.unGiveDay < 0 ? '#fa7671': '#999999';
            this.isNotGiveDisabled = newValue === '' ? true : false ;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    &-wrap {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 100%;
        transform: scale(1,1);
        padding-bottom: 12px;
        .header {
            position: fixed;
            z-index: 999;
            margin: 0px 12px 1px;
            padding-top: 12px;
            width: calc(100% - 24px);
            height: 78px;
            overflow: hidden;
            background: #f0f2f5;
            transform: scale(1,1);
            .header-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                height: 100%;
                width: 100%;
                padding: 0 32px;
                color: #333333;
                font-size: 18px;
                font-weight: 500;
                background: white;
                &:nth-child(1){
                    color: #333;
                    font-size: 18px;
                    font-weight: 500;
                }

                .return{
                    color: #666666;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                }
            }
        }
        .main {
            position: relative;
            flex: 1;
            flex-wrap: wrap;
            height: 100%;
            max-height: calc(100vh - 146px);
            margin: 79px 12px 0;
            background: #ffffff;
            overflow-y: auto;
            .btn-group{
                position: absolute;
                right: 32px;
                top: 32px;
            }
        }


    }

    main {
        width: 100%;
        padding: 32px;
        > div {
            width: 100%;
            margin: 8px 0;
            &:first-child,&:last-child{
                margin:0;
            }
            span{
                font-size: 14px;
                font-weight: 400;
                line-height: 27px;

                &:nth-of-type(1){
                    display: inline-block;
                    width: 158px;
                    color: #999999;
                    text-align: right;

                }
                &:nth-of-type(2){
                    display: inline-block;
                    width: calc(100% - 162px);
                    padding-left: 21px;
                    color: #333333;

                }
            }
        }
    }
}

// 按钮样式
.default-btn {
    border-color: #1890FF;
    color: #1890FF;
    background: white;

    &.el-button:active {
        background: #ecf5ff;
    }
}

.dialog-box {
    position: relative;
    &.give-month-box::after{
        position: absolute;
        right: 34px;
        top: 11px;
        content: '月';
        color: #333333;
        font-size: 14px;
        line-height: 1.5;
    }
    &.un-give-day-box::after{
        position: absolute;
        right:34px;
        top: 11px;
        content: '天';
        color: #333333;
        font-size: 14px;
        line-height: 1.5;
    }
}

.user-vip-manager-dialog{
    .label{
        display: flex;
        align-items: center;
        justify-content:flex-end;
        color: #333333;
        padding-right: 11px;
    }
    .dialog-main > div {
        display: flex;
    }
}

.tips{
    font-size: 12px;
}
.right{
    text-align: right;
}
.w-120{
    width: 120px;
}
.m-t-12{
    margin-top: 12px;
}
.w-100{
    width: 100px;
}
.off-give-label{
    line-height: 1.5;
    margin-bottom: 11px;
    > div:nth-of-type(1){
        width: 120px;
        text-align: end;
        padding-right: 11px;
    }
}
.days{
    font-weight: 500;
    span{
        color: #20A0FF;
        font-weight: 500;
        margin-right: 10px;
    }
}
// 覆盖样式
/deep/ .el-dialog__header {
    padding-top: 10px;
    box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
    display: flex;
    align-items: center;
    background: #FAFAFA;
    border-radius: 4px 4px 0 0;

    .el-dialog__title {
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }

    .el-icon-close:before {
        color: rgb(194, 194, 194);
        font-size: 17px;
        font-weight: bold;
    }

    .el-dialog__headerbtn {
        top: 14px;
    }
}

 .user-vip-manager /deep/ .el-table th.el-table__cell>.cell{
    font-weight: 500;
}

/deep/ .el-dialog__body{
    display: flex;
    justify-content: center;
}
/deep/ .el-input__inner{
    width: 230px;
}

/deep/ .el-dialog__footer {
    text-align: center;
}

</style>
